<template>
  <div v-if="list">
    <van-cell value="内容" icon="location-o" class="van-cells">
      <template #icon>
        <van-icon name="arrow-left" color="#FFFFFF" size="22" />
      </template>
      <template #right-icon>
        <van-icon
          name="location-o"
          color="#FFFFFF"
          size="22"
          @click="$router.push('/map')"
        />
      </template>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #default>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          left-icon="search"
        >
          <template #left>
            <div class="location">
              <span @click="goCityList()">{{ cityName }}</span>
              <van-icon name="arrow-down" />
            </div>
          </template>
        </van-search>
      </template>
    </van-cell>
    <div class="screen">
      <div class="screen_item" @click="shift('area')" ref="area">区域</div>
      <div class="screen_item" @click="shift('way')" ref="way">方式</div>
      <div class="screen_item" @click="shift('rent')" ref="rent">租金</div>
      <div class="screen_item" @click="shift('filter')" ref="filter">筛选</div>
    </div>
    <van-picker title="区域" v-show="isArea" :columns="Areacolumns">
      <template #columns-bottom>
        <div class="bottom_option">
          <div class="cancel" @click="cancel('area')">取消</div>
          <div class="sure" @click="makeSure">确定</div>
        </div>
      </template>
    </van-picker>
    <van-picker
      title="方式"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
      v-show="isWay"
      :columns="Methodscolumns"
    >
      <template #columns-bottom>
        <div class="bottom_option">
          <div class="cancel" @click="cancel('way')">取消</div>
          <div class="sure" @click="makeSure">确定</div>
        </div>
      </template>
    </van-picker>
    <van-picker
      title="租金"
      v-show="isRent"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
      :columns="Countcolumns"
    >
      <template #columns-bottom>
        <div class="bottom_option">
          <div class="cancel" @click="cancel('rent')">取消</div>
          <div class="sure" @click="makeSure">确定</div>
        </div>
      </template>
    </van-picker>
    <!-- <van-picker title="筛选" v-show="isfilter" :columns="columns" /> -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in renderList"
        :key="item.houseCode"
        @click="goDetail(item.houseCode)"
        class="cell"
      >
        <div class="venCell">
          <img :src="item.houseImg" alt="太卡辣！" />
          <div class="desc">
            <span
              ><strong>{{ item.price }}</strong></span
            >
            <p class="m-desc">{{ item.desc }}</p>
            <van-tag
              type="primary"
              size="medium"
              color="#e1f5f8"
              text-color="#39becd"
              >近地铁</van-tag
            >
            <p class="price">
              <span>{{ item.price }}</span> 万/月
            </p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getHousesById, getHousesByObj } from '@/api/house'
import { getCityList, getArea, getHouseCondition } from '@/api/area'
export default {
  name: 'FindPage',
  async created () {
    const { body } = await getArea(this.cityId)
    this.Areacolumns[0].children = [...body]
    this.Areacolumns[0].children = this.Areacolumns[0].children.map(item => {
      return {
        text: item.label,
        value: item.value
      }
    })
    // TODO
    this.Areacolumns[0].children.children = this.Areacolumns[0].children.map(
      async item => {
        const { body } = await getArea(item.value)
        console.log(body)
        return {
          text: body.label,
          value: body.value
        }
      }
    )
    console.log(this.Areacolumns[0].children.children)
  },
  data () {
    return {
      value: '',
      active: 0,
      list: [],
      renderList: [],
      cityId: this.$route.query.cityId || 'AREA|88cff55c-aaa4-e2e0',
      loading: false,
      finished: false,
      //选择器
      type: '',
      isArea: false,
      isWay: false,
      isRent: false,
      isfilter: false,
      //选择器
      cityName: this.$route.query.city || '北京',
      Areacolumns: [
        {
          text: '区域',
          // 级联选择
          children: [
            {
              text: '朝阳',
              children: ['建国门外']
            }
          ]
        },
        {
          text: '地铁',
          // 级联选择
          children: [
            {
              text: '不限',
              children: ['']
            }
          ]
        }
      ],
      Methodscolumns: ['不限', '整租', '合租'],
      Countcolumns: [
        '不限',
        '1000及以下',
        '1000 - 2000',
        '2000 - 3000',
        '3000 - 4000',
        '4000 - 5000',
        '5000 - 7000',
        '7000以上'
      ]
    }
  },
  methods: {
    async onLoad () {
      const { body } = await getHousesById(this.cityId)
      const data = await getCityList(2)
      const CityChildren = await getArea('cityId')
      this.renderList = [...body.list]
      this.renderList.forEach(item => {
        item.houseImg = 'http://liufusong.top:8080' + item.houseImg
      })
    },
    onConfirm (value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    async onChange (picker, value) {
      this.$toast(`当前值：${value}`)
      const type = value === '整租' ? true : false
      const obj = {
        cityId: this.cityId,
        rentType: type
      }
      const { body } = await getHousesByObj(obj)
      this.renderList = [...body.list]
    },
    onCancel () {
      this.$toast('取消')
    },
    goDetail (houseCode) {
      this.$router.push(
        {
          name: 'detail',
          query: {
            houseCode
          }
        },
        () => {}
      )
    },
    shift (type) {
      this.type = type
      if (this.type === type) {
        for (let k in this.$refs) {
          this.$refs[k].style.color = '#000'
        }
        this.$refs[type].style.color = '#21b97a'
      }
      switch (type) {
        case 'area':
          return (
            (this.isArea = !this.isArea),
            (this.isWay = false),
            (this.isRent = false)
          )
        case 'way':
          return (
            (this.isWay = !this.isWay),
            (this.isArea = false),
            (this.isRent = false)
          )
        case 'rent':
          return (
            (this.isRent = !this.isRent),
            (this.isWay = false),
            (this.isArea = false)
          )
        case 'filter':
          return (this.isfilter = !this.isfilter)
      }
    },
    makeSure () {
      this.$toast('确定')
    },
    cancel (type) {
      // this.$toast('取消')
      switch (type) {
        case 'way':
          return (this.isWay = false)
        case 'area':
          return (this.isArea = false)
        case 'rent':
          return (this.isRent = false)
      }
    },
    onSearch () {
      console.log(1)
    },
    goCityList () {
      this.$router.push({
        path: '/city',
        query: {
          cityName: this.cityName
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.cell {
  height: 120px;
}
.bottom_option {
  display: flex;
  font-size: 18px;
  height: 50px;
  border-top: 0.1px solid #999;
  border-bottom: 0.1px solid #999;

  .cancel {
    line-height: 50px;
    flex: 1;
    text-align: center;
    color: #21b97a;
  }
  .sure {
    line-height: 50px;
    flex: 2;
    text-align: center;
    background-color: #21b97a;
    color: #fff;
  }
}
.screen {
  display: flex;
  text-align: center;
  align-items: center;
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e4e6f0;
  .screen_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1;
    min-width: 10px;
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 18px;
      left: 70px;
      width: 0;
      border: 5px solid #bbb;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
}
.van-cells {
  background-color: #21b97a;
  .van-search {
    padding: 0;
  }
  .van-icon-arrow-left {
    padding: 5px 10px 5px 0px;
  }
  .van-icon-location-o {
    padding: 5px 0px 5px 10px;
  }
  .location {
    padding-left: 5px;
    border-right: 1px solid #e5e5e5;
    span {
      padding-left: 5px;
    }
    .van-icon-arrow-down {
      padding-left: 5px;
      padding-right: 6px;
    }
  }
}

.venCell {
  display: flex;
  line-height: 3px;
  img {
    width: 100px;
    height: 85px;
  }
  .desc {
    margin-top: 7px;
    padding-left: 12px;
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: left;
    .m-desc {
      color: #afb2b3;
      font-size: 12px;
    }
    .price {
      color: red;
      span {
        font-weight: 700;
      }
    }
  }
}
</style>
